<template>
    <view>
        <a-row :gutter="[16, 24]" type="flex" justify="center" align="middle">
            <a-col :span="24">
                <a-tooltip title="套管管理">
                    <a-button type="primary" shape="circle" size="large" @click="openDrawer('套管')">
                        <template #icon>
                            <SlidersOutlined />
                        </template>
                    </a-button>
                </a-tooltip>
            </a-col>
            <a-col :span="24">
                <a-tooltip title="电缆管理">
                    <a-button type="primary" shape="circle" size="large" @click="openDrawer('电缆')">
                        <template #icon>
                            <ToolOutlined />
                        </template>
                    </a-button>
                </a-tooltip>
            </a-col>
            <a-col :span="24">
                <a-tooltip title="油管管理">
                    <a-button type="primary" shape="circle" size="large" @click="openDrawer('油管')">
                        <template #icon>
                            <ColumnWidthOutlined />
                        </template>
                    </a-button>
                </a-tooltip>
            </a-col>
            <a-col :span="24">
                <a-tooltip title="钻杆管理">
                    <a-button type="primary" shape="circle" size="large" @click="openDrawer('钻杆')">
                        <template #icon>
                            <BoxPlotOutlined />
                        </template>
                    </a-button>
                </a-tooltip>
            </a-col>
        </a-row>
        <CasingDrawer ref="casingDrawerRef"></CasingDrawer>
        <LinerDrawer ref="linerDrawerRef"></LinerDrawer>
        <TubingsDrawer ref="tubingsDrawer"></TubingsDrawer>
        <DrillPipeDrawer ref="drillPipeDrawer"></DrillPipeDrawer>
    </view>
</template>
<script setup>
import CasingDrawer from './drawer/CasingDrawer.vue'
import LinerDrawer from './drawer/LinerDrawer.vue';
import TubingsDrawer from './drawer/TubingDrawer.vue';
import DrillPipeDrawer from './drawer/DrillPipeDrawer.vue';
import { BoxPlotOutlined, ColumnWidthOutlined ,ToolOutlined, SlidersOutlined } from '@ant-design/icons-vue'
const casingDrawerRef = ref(null)
const linerDrawerRef = ref(null)
const tubingsDrawer = ref(null)
const drillPipeDrawer = ref(null)
function openDrawer(e) {
    console.log(e)
    if (e === '套管') {
        console.log('打开抽屉')
        casingDrawerRef.value.openDrawer()
    }else if(e === '电缆'){
        linerDrawerRef.value.openDrawer()
    }else if(e === '油管'){
        tubingsDrawer.value.openDrawer()
    }else if(e === '钻杆'){
        drillPipeDrawer.value.openDrawer()
    }
}
</script>